.table-hover {
  .active { color:#212529; background-color:rgba(0,0,0,.075) }
}

.dash-modal {
  display: block;
  overflow-y: auto;
  background-color: change-color($color-gray-900, $alpha: 0.5, $lightness: 20%);

  pre {
    margin-bottom: 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .modal-dialog {
    max-width: 900px;
  }

  .modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;

    .modal-content {
      height: 100%;
      border: 0;
      border-radius: none;
    }

    .modal-header {
      border-radius: none;
    }

    .modal-body {
      overflow-y: auto;
    }
  }

  .modal-header {
    background-color: $color-gray-100;
    border-bottom: 2px solid $color-gray-500;
    padding: 1rem 1.5rem;
    h6 {
      font-weight: 700;
    }
  }

  .modal-content {
    .modal-action { 
      padding: 1rem;
      margin: -1rem -1rem -1rem auto;
      line-height: 1;
    }

    .modal-action-item {
      display: inline-block;
      color: #aaa;
      font-size: 1.5rem;
      vertical-align: middle;
      font-weight: bold;
      text-align: right;

      &:hover, &:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }
    }

    .modal-action-hidden {
      display: none;
    }
  }
}

@media (max-width: map-get($grid-breakpoints, lg)) {
  .dash-modal {
    .modal-dialog {
      max-width: 700px;
    }
  }
}
